<template>
	<w-container class="page-bg pa-16 pb-16" :loading='loading'>
		<w-navbar title=" "></w-navbar>
		<view class="info_box flex flex-ai-center">
			<w-image radius="50%" :width="48" :height="48" :src="c_info.avatar"></w-image>
			<view class="font-color-999 ml-8">{{c_info.nickname}}</view>
		</view>
		<view class="font-color-white font-w-bold font-size-20 mt-20">默认邀请链接</view>
		<view class="pa-12 color-border-box mt-12">
			<view class="flex flex-ai-center flex-js-sb">
				<view class="font-color-666 font-size-16">邀请码</view>
				<view class="flex flex-ai-center">
					<view class="font-color-textPrimary font-size-16">{{c_info.inviter_code}}</view>
					<w-icon name="icon-yqm" size="15"></w-icon>
				</view>
			</view>	
			<view @click="toPage('/pages/invitation/invitation')" class="flex flex-ai-center flex-js-sb mt-20">
				<view class="font-color-666 font-size-16">邀请海报</view>
				<view class="flex flex-ai-center">
					<w-icon name="icon-yqhb" size="15"></w-icon>
				</view>
			</view>
			<view @click="copyInviteUrl" class="flex flex-ai-center flex-js-sb mt-20">
				<view class="font-color-666 font-size-16">邀请链接: {{h5_invite_url.slice(0,10) + '******' + h5_invite_url.slice(-5)}}</view>
				<view class="flex flex-ai-center">
					<w-icon name="copy-dark" size="20"></w-icon>
				</view>
			</view>	
		</view>
		<view class="font-color-white font-w-bold font-size-20 mt-20">数据详情</view>
		<view class="pa-12 color-border-box mt-12">
			<view class="flex flex-ai-center flex-js-sb">
				<view class="font-color-666 font-size-16">总返佣金额</view>
				<view class="font-color-textPrimary font-size-16">{{c_info.all_commision}}</view>
			</view>	
			<view class="flex flex-ai-center flex-js-sb mt-20">
				<view @click="show = true" class="flex flex-ai-center">
					<view class="font-color-666 font-size-16 mr-4">本期返佣金额</view>
					<w-icon name="icon-question" size="15"></w-icon>
				</view>
				<view class="font-color-textPrimary font-size-16">{{c_info.yesterday_commision}}</view>
			</view>	
			<view class="flex flex-ai-center flex-js-sb mt-20">
				<view class="font-color-666 font-size-16 mr-4">名下用户总交易金额</view>
				<view class="font-color-textPrimary font-size-16">{{c_info.user_transaction}}</view>
			</view>	
			<view class="flex flex-ai-center flex-js-sb mt-20">
				<view class="font-color-666 font-size-16 mr-4">名下用户总佣金</view>
				<view class="font-color-textPrimary font-size-16">{{c_info.mingxia_commision}}</view>
			</view>	
		</view>
		<view @click="toPage('/pages/rebate/rebateInviteDetail')" class="flex flex-ai-center mt-20">
			<view class="font-color-white font-w-bold font-size-20 mr-4">被邀请人</view>
			<w-icon name="right-white" size="15"></w-icon>
		</view>
		<view class="pa-12 color-border-box mt-12">
			<view class="flex flex-ai-center flex-js-sb">
				<view class="font-color-666 font-size-16">邀请人数</view>
				<view class="font-color-textPrimary font-size-16">{{c_info.yao_counts}}</view>
			</view>	
			<view class="flex flex-ai-center flex-js-sb mt-20">
				<view @click="show1 = true" class="flex flex-ai-center">
					<view class="font-color-666 font-size-16 mr-4">有效邀请人数</view>
					<w-icon name="icon-question" size="15"></w-icon>
				</view>
				<view class="font-color-textPrimary font-size-16">{{c_info.you_yao_counts}}</view>
			</view>	
		</view>
		<view class="font-color-white font-w-bold font-size-20 mt-20 mb-12">节点排行榜</view>
		<w-image @click.native="toPage('/pages/rebate/leaderboard')" src="/static/bg/yao-image.png" :width="686/2" mode="widthFix"></w-image>
		<view class="shuoming_box color-border-box mt-40" style="position: relative;">
			<w-image class="icon_position" src="/static/bg/box-left.png" :width="122/2" :height="122/2"></w-image>
			<u-parse :content="handleLang(appConfig.comm_desc)"></u-parse>
		</view>
		<w-toast v-model="show" contentAlign="center" :showCancel="false" submitText="我知道了" content="指前一天的返金额"></w-toast>
		<w-toast v-model="show1" contentAlign="center" :showCancel="false" submitText="我知道了" content="有交易记录的邀请人数"></w-toast>
	</w-container>
</template>

<script>
	import { mapState } from "vuex"
	import { commision_info } from "@/api/user/index"
	export default {
		data() {
			return {
				loading:true,
				c_info:{},
				show:false,
				show1:false
			}
		},
		onLoad() {
			this.get_commision_info()
		},
		computed:{
			...mapState('config',{
				h5_invite_url(state){
					return `${state.info.h5_invite_url}&content=${this.userInfo.inviter_code}`
				}
			})
		},
		methods: {
			// 复制邀请码
			copyInviteUrl() {
				uni.setClipboardData({
					data: this.h5_invite_url,
					success: function () {
						console.log('success');
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			get_commision_info(){
				commision_info().then( res => {
					this.c_info = res.data
					this.loading = false
				}).catch( err => {})
			},
			toPage(url){
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.info_box {
		
	}
	.color-border-box {
		background: $item-bg-color;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		opacity: 1;
		border: 2rpx solid #F8931F;
	}
	.shuoming_box {
		padding:84rpx 32rpx 32rpx;
	}
	.icon_position {
		position: absolute;
		top:-61rpx;
		left:-22rpx;
	}
</style>
